<script>
var __SVG = false;
var __svgNS = false;
if (document.createElementNS) {
        __svgNS = "http://www.w3.org/2000/svg";
        __svg = document.createElementNS(__svgNS, "svg");
        __SVG = (__svg.x != null);
}

if (__SVG) {
        /* ============= SVG ============== */
        vectorGraphics = function(o, antialias) {
                this.canvas = document.createElementNS(__svgNS, "svg");
                this.canvas.style.position = "absolute";
                o.appendChild(this.canvas);
                this.createLine = function(w, col, linecap) {
                        var o = document.createElementNS(__svgNS, "line");
                        o.setAttribute("shape-rendering", antialias?"auto":"optimizeSpeed");
                        o.setAttribute("stroke-width", Math.round(w)+"px");
                        if (col) o.setAttribute("stroke", col);
                        if (linecap) o.setAttribute("stroke-linecap", linecap);
                        o.move = function(x1, y1, x2, y2) {
                                this.setAttribute("x1", Math.round(x1) + .5);
                                this.setAttribute("y1", Math.round(y1));
                                this.setAttribute("x2", Math.round(x2));
                                this.setAttribute("y2", Math.round(y2));
                        }
                        o.color = function(c){ this.setAttribute("stroke", c); }
                        o.RGBcolor = function(R, G, B){ this.setAttribute("stroke", "rgb("+Math.round(R)+","+Math.round(G)+","+Math.round(B)+")"); }
                        o.stroke_weight = function(s){ this.setAttribute("stroke-width", Math.round(s)+"px"); }
                        this.canvas.appendChild(o);
                        return o;
                }
                this.createPolyline = function(w, points, col, fill) {
                        var o = document.createElementNS(__svgNS, "polyline");
                        o.setAttribute("shape-rendering", antialias?"auto":"optimizeSpeed");
                        o.setAttribute("stroke-width", Math.round(w));
                        if (col) o.setAttribute("stroke", col);
                        o.setAttribute("fill", fill?fill:"none");
                        if (points) o.setAttribute("points", points);
                        o.move = function(points) {
                                this.setAttribute("points", points);
                        }
                        this.canvas.appendChild(o);
                        return o;
                }
                this.createOval = function(diam, filled) {
                        var o = document.createElementNS(__svgNS, "circle");
                        o.setAttribute("shape-rendering", antialias?"auto":"optimizeSpeed");
                        o.setAttribute("stroke-width", 0);
                        o.setAttribute("r", Math.round(diam / 2));
                        o.style.cursor = "pointer";
                        o.move = function(x1, y1, radius) {
                                this.setAttribute("cx", Math.round(x1));
                                this.setAttribute("cy", Math.round(y1));
                                this.setAttribute("r", Math.round(radius));
                        }
                        o.stroke_color = function(col) { this.setAttribute("stroke", col); }
                        o.fill_color = function(col) { this.setAttribute("fill", col); }
                        o.stroke_weight = function(sw) { this.setAttribute("stroke-width", sw); }
                        this.canvas.appendChild(o);
                        return o;
                }
        }
        
} else if (document.createStyleSheet) {
        /* ============= VML ============== */
        vectorGraphics = function(o, antialias) {
                document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
                var style = document.createStyleSheet();
                var VMLel = ['line','stroke','polyline','fill','oval'];
                for (var i=0,l=VMLel.length;i<l;i++) {
                        style.addRule('v\\:'+VMLel[i], "behavior: url(#default#VML);");
                        style.addRule('v\\:'+VMLel[i], "antialias: "+antialias+";");
                }
                this.canvas = o;
                this.createLine = function(w, col, linecap) {
                        var o = document.createElement("v:line");
                        o.strokeweight = Math.round(w)+"px";
                        if (col) o.strokecolor = col;
                        o.move = function(x1, y1, x2, y2) {
                                this.to   = (Math.round(x1) + .5) + "," + Math.round(y1);
                                this.from = Math.round(x2) + "," + Math.round(y2);
                        }
                        o.color = function(c){ this.strokecolor = c; }
                        o.RGBcolor = function(R, G, B){ this.strokecolor = "rgb("+Math.round(R)+","+Math.round(G)+","+Math.round(B)+")"; }
                        o.stroke_weight = function(s){ this.strokeweight = Math.round(s)+"px"; }
                        if (linecap) {
                                s = document.createElement("v:stroke");
                                s.endcap = linecap;
                                o.appendChild(s);
                        }
                        this.canvas.appendChild(o);
                        return o;
                }
                this.createPolyline = function(w, points, col, fill) {
                        var o = document.createElement("v:polyline");
                        o.strokeweight = Math.round(w)+"px";
                        if (col) o.strokecolor = col;
                        o.points = points;
                        if (fill) o.fillcolor = fill;
                        else {
                                s = document.createElement("v:fill");
                                s.on = "false";
                                o.appendChild(s);
                        }
                        o.move = function(points) {
                                this.points.value = points;
                        }
                        this.canvas.appendChild(o);
                        return o;
                }
                this.createOval = function(diam, filled) {
                        var o = document.createElement("v:oval");
                        var os = o.style;
                        os.position = "absolute";
                        os.cursor = "pointer";
                        o.strokeweight = 1;
                        o.filled = filled;
                        os.width = Math.round(diam) + "px";
                        os.height = Math.round(diam) + "px";
                        o.move = function(x1, y1, radius) {
                                os.left   = Math.round(x1 - radius) + "px";
                                os.top    = Math.round(y1 - radius) + "px";
                                os.width  = Math.round(radius * 2) + "px";
                                os.height = Math.round(radius * 2) + "px";
                        }
                        o.stroke_color = function(col) { this.strokecolor = col; }
                        o.fill_color = function(col) { this.fillcolor = col; }
                        o.stroke_weight = function(sw) { this.strokeweight = sw; }
                        this.canvas.appendChild(o);
                        return o;
                }
        }
} else {
        /* ==== no script ==== */
        vectorGraphics = function(o, i) {
                return false;
        }
}

//alert(vectorGraphics);
//if()==false


</script>
<div style="width:800px;height:600px;border:1px solid blue;overflow:hidden;" id="screen">
1</div>
<script>
	scr = document.getElementById("screen"); 
	svg = new vectorGraphics(scr, true); 
	//o = svg.createLine(1,"black"); 
	//o.move(0,0,100,100);
var mylin= new Array(12);
mylin[0]=svg.createLine(1,"black"); 
mylin[1]=svg.createLine(1,"black"); 
mylin[2]=svg.createLine(1,"black"); 
mylin[3]=svg.createLine(1,"black"); 
mylin[4]=svg.createLine(1,"black"); 
mylin[5]=svg.createLine(1,"black"); 
mylin[6]=svg.createLine(1,"black"); 
mylin[7]=svg.createLine(1,"black"); 
mylin[8]=svg.createLine(1,"black"); 
mylin[9]=svg.createLine(1,"black"); 
mylin[10]=svg.createLine(1,"black"); 
mylin[11]=svg.createLine(1,"black"); 

</script>
<script>
var starx=150;var stary=150;var round=100;var thita=Math.PI/16;var d=3;

function point(x,y,z){
	this.x=x;
	this.y=y;
	this.z=z;
}

p=new Array();
p[0]=new point(1,1,1);
p[1]=new point(-1,1,1);
p[2]=new point(-1,-1,1);
p[3]=new point(1,-1,1);
p[4]=new point(1,1,-1);
p[5]=new point(-1,1,-1);
p[6]=new point(-1,-1,-1);
p[7]=new point(1,-1,-1);

function lin(pindxf,pindxt){
	this.from=pindxf;
	this.to  =pindxt;
}
l=new Array();
l[0]=new lin(p[0],p[1]);
l[1]=new lin(p[1],p[2]);
l[2]=new lin(p[2],p[3]);
l[3]=new lin(p[3],p[0]);
l[4]=new lin(p[0],p[4]);
l[5]=new lin(p[1],p[5]);
l[6]=new lin(p[2],p[6]);
l[7]=new lin(p[3],p[7]);
l[8]=new lin(p[4],p[5]);
l[9]=new lin(p[5],p[6]);
l[10]=new lin(p[6],p[7]);
l[11]=new lin(p[7],p[4]);

function myturn(){
for(i=0;i<p.length;i++){
tx=Math.cos(thita)*p[i].x-Math.sin(thita)*p[i].y;
ty=Math.cos(thita)*p[i].y+Math.sin(thita)*p[i].x;
p[i].x=tx;
p[i].y=ty;
}
}
function projecx(p){
	return p.x/(d-p.y)*round+starx;
}
function projecy(p){
	return p.z/(d-p.y)*round+stary;
}
function myfresh(){
for(i=0;i<l.length;i++)
{
mylin[i].move(projecx(l[i].from),projecy(l[i].from),projecx(l[i].to),projecy(l[i].to));
}
}
function myinterval(){
myturn();
myfresh();
}
setInterval("myinterval();",100);
</script>
